<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .banner {
            width: 200px;
            height: 300px;
            margin: 40px auto;
            overflow: hidden;
            position: relative;
        }
        .banner ul {
            width: 1000px;
            height: 300px;
            display: flex;
            position: absolute;
            background-color: #f00;
        }
        .banner li {
            width: 200px;
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 50px;
        }
        span {
            position: absolute;
            z-index: 3;
        }

    </style>
</head>
<body>

    <div class="banner">
        <span id="prev">&lt;</span>
        <span id="next">&gt;</span>
        <ul id="ul">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        
    </div>

    <script>

        // 轮播跟css样式有必然关系
        //    分析：div  200*300
        //         ul   1000*300   5张图
        //    具体的实现：  不断的移动ul的位置  每次改变的位置为一个图片的宽度

        var oUl = document.getElementById('ul') ;
        var oPrev = document.getElementById('prev') ;
        var oNext = document.getElementById('next') ;
        
        var index = 0 ;    // 记录播放第几张图片   下标从0开始

        var t ;   // 定时器

        // 自动播放 --- 每隔1s切换下一张图
        autoPlay() ;



        // 上翻页
        oPrev.onclick = function() {
            clearInterval(t) ;
            index-- ;
            if(index === -1) {
                index = 4
            }
            oUl.style.left = - index * 200 + 'px' ;
            // 不点击的时候可以继续自动播放
            autoPlay()
        }

        
        //  下翻页
        oNext.onclick = function() {
            clearInterval(t) ;
            index++ ;
            if(index === 5) {
                index = 0
            }
            oUl.style.left = - index * 200 + 'px' ;
            // 不点击的时候可以继续自动播放
            autoPlay()
        }
       



        function autoPlay() {
            t = setInterval(function(){
                index++ ;
                // 播放最后一张的时候index=4  但是index++ 
                if(index === 5) {
                    index = 0 ;
                }
                oUl.style.left = - index * 200 + 'px' ;
            } , 1000)
        }
        


    </script>
    
</body>
</html>